
<template> 
<div style="height: 200px;" class="container" ref="container"></div>
  <div style="margin-top: 15px; padding: 0 16px">
    <el-tabs type="border-card" style="min-height: 320px; box-shadow: none">
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> 工序列维护表</span>
        </template>
        <vol-table ref="tableList"
                 :loadKey="true"
                 :columns="columns"
                 :pagination-hide="true"
                 :height="210"
                 :defaultLoadPage="false"
                 @loadBefore="loadBefore"
                 url="/api/V_PROC_PROCESSList/getPageData"
                 :row-index="true"
                 :index="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="工位">
       
        <!-- <vol-table ref="tableList1"
                 :loadKey="true"
                 :columns="columns"
                 :pagination-hide="true"
                 :height="210"
                 :defaultLoadPage="false"
                 @loadBefore="loadBefore"
                 url="/api/V_PROC_PROCESSList/getPageData"
                 :row-index="true"
                 :index="false"></vol-table> -->
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
  import LogicFlow from "@logicflow/core";
  import "@logicflow/core/lib/style/index.css";
import VolTable from "@/components/basic/VolTable.vue";
export default {
  mounted() {
      this.lf = new LogicFlow({
        container: this.$refs.container,
        grid: true,
      });
 
      this.lf.render(this.flowData);
    },
  components: {
    VolTable
  },
  methods: {
   
    loadBefore (params, callback) {
      var _row;
      //获取主表选中的行
      this.$emit("parentCall", ($vue) => {
        var rows = $vue.getSelectRows();
        if (rows.length) {
          _row = rows[0];
        }
      });
      if (!_row) {
        //取消选中，清空明细
        return (this.$refs.tableList.rowData.length = 0);
        //  return this.$Message.error("请选中主表行数据");
      }
      params.wheres =[{ name: "Process_Id", value: _row.Process_Id}];
      return callback(true);
    },
    loadBefore1(params, callback) {
      //设置查询 条件

      var _row;
      //获取主表选中的行
      this.$emit("parentCall", ($vue) => {
        var rows = $vue.getSelectRows();
        if (rows.length) {
          _row = rows[0];
        }
      });
      if (!_row) {
        //取消选中，清空明细
        return (this.$refs.tableList.rowData.length = 0);
        //  return this.$Message.error("请选中主表行数据");
      }

      //设置查询条件，用主表id加载明细表数据(如果是自己定义的接口，这里条件自己处理)
      params.value = _row.Order_Id;
      //设置排序字段(如果是自己定义的接口，排序字段不一定填写)
      if (!params.sort) {
        params.sort = "CreateDate";
      }
      return callback(true);
    },
    getRender() {
      //生成表格编辑配置
      return (h, { row, column, index }) => {
        return h(
          "div",
          {
            style: {
              cursor: "pointer",
              color: " #409eff",
              "font-size": "13px",
            },
          },
          [
            h(
              "a",
              {
                props: {},
                style: { "margin-left": "9px", "border-bottom": "1px solid" },
                onClick: (e) => {
                  e.stopPropagation();
                 // this.$refs.tableList.edit.rowIndex = index;
                // this.$refs.table.$refs.table.clearSelection();      
            
               this.$parent.openRen(null);
                },
              },
              "人员"
            ),
            h(
              "a",
              {
                props: {},
                style: { "margin-left": "9px", "border-bottom": "1px solid" },
                onClick: (e) => {
                  e.stopPropagation();
                  console.log( this.$parent);
                  this.$parent.openEqu(null);
                 
                 // this.$refs.tableList.edit.rowIndex = index;
                },
              },
              "设备"
            ),
          ]
        );
      };
    },
  },
  data () {
    return {
      flowData:{
   
    },
      tableData: [],
      //从生成的代码sellorder2.vue里面把明细配置复制过来就能用
      columns:  [{field:'ProcessList_Id',title:'ProcessList_Id',type:'guid',hidden:true,width:110,readonly:true,require:true,align:'left'},
                       {field:'Process_Id',title:'工艺路线ID',type:'guid',hidden:true,width:110,require:true,align:'left',sort:true},
                      //  {field:'OperationId',title:'工序Id1',type:'guid',hidden:true,bind:{ key:'value',data:[]},width:110,require:true,align:'left'},
                      {field:'OperationName',title:'工序编码',type:'string',width:110,align:'left',sort:true},
                      {field:'OperationId',title:'名称',type:'guid',bind:{ key:'工序',data:[]},width:110,edit:{type:'select'},require:true,align:'left',sort:false},
                       
                       {
          title: "操作",
          width: 110,
          align: "center",
          render: this.getRender(),
        },
                       {field:'CreateBy',hidden:true,title:'创建人',type:'string',width:110,align:'left'},
                       {field:'CreateOn',hidden:true,title:'创建时间',type:'datetime',width:150,align:'left',sort:true},
                       {field:'UpdateBy',hidden:true,title:'更新人',type:'string',width:110,align:'left'},
                       {field:'LastUpdateOn',hidden:true,title:'更新时间',type:'datetime',width:150,align:'left',sort:true},
                       {field:'IsDeleted',hidden:true, title:'逻辑删除  0/不删除  1/已删除',type:'bool',width:110,align:'left'}]
    }
  }
}
</script>
<style scoped>
 h3{
     font-weight: 500;
    padding-left: 10px;
    background: white;
    margin-top: 8px;
    padding-bottom: 5px;
 }
 #container {
    width: 1000px;
    height: 1000px
  }
</style>